---
import { getSponsorshipGoal } from "../data/sponsorshipGoal";
import { Icon } from "@astrojs/starlight/components";

const { variant } = Astro.props;

const response = await getSponsorshipGoal();
const current = response.data.user.monthlyEstimatedSponsorsIncomeInCents / 100;
const GOAL = 150; // USD
---

<div class={`text-center mt-0 max-w-full md:max-w-[80ch]`}>
  <label
    for="sponsorship-goal"
    class="mt-0 mb-0 text-sm text-pretty text-[var(--sl-color-gray-3)]"
  >
    {
      variant !== "mini" ? (
        <div class="hidden md:block">
          <Icon
            name="information"
            size="16px"
            class="mr-1/2 relative -bottom-[2.5px] inline"
          />
          Get early access through the
          <a
            class="text-[var(--sl-color-gray-2)] no-underline"
            href="/insiders"
          >
            Insiders Program
          </a>
        </div>
      ) : null
    }
  </label>
  <div class="relative mt-1">
    <progress
      id="sponsorship-goal"
      value={current}
      max={GOAL}
      class="h-4 w-full appearance-none [&::-moz-progress-bar]:bg-pink-200 dark:[&::-moz-progress-bar]:bg-pink-300 [&::-webkit-progress-bar]:rounded [&::-webkit-progress-bar]:bg-[var(--sl-color-gray-5)] [&::-webkit-progress-value]:rounded [&::-webkit-progress-value]:bg-pink-400 dark:[&::-webkit-progress-value]:bg-pink-800"
    >
      {
        Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(current)
      } / {
        Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(GOAL)
      }
    </progress>
    <p
      class="absolute -top-[0.6rem] right-0 left-0 text-xs text-[var(--sl-color-gray-2)] mix-blend-hard-light dark:mix-blend-lighten"
    >
      {
        Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(
          (current / GOAL) * 100,
        )
      }% towards ${GOAL} per month goal
    </p>
  </div>
  <p
    class={`flex justify-center items-center gap-2 mt-0 md:mt-0 mb-0 text-xs md:text-sm text-[var(--sl-color-gray-3) text-pretty`}
  >
    <span
      class="hidden text-pink-400 md:inline-block md:align-middle dark:text-pink-600"
    >
      <Icon class="inline align-text-top" name="heart" size="16px" />
    </span> Hitting the goal will open source the app
  </p>
</div>
